<template>
<div style="display: flex;">
	<div style="margin-right: 20px;">
		 <el-date-picker
			v-model="startDate"
			type="date"
			:placeholder="startPlaceHolder"
			:disabled-date="startDateEnabled"
			v-bind="$attrs.startOptions"
		      />
	</div>
	<div >
		 <el-date-picker
			v-model="endDate"
			type="date"
			:placeholder="endPlaceHolder"
			:disabled="endDateDisabled"
			:disabled-date="endDateEnabled"
			v-bind="$attrs.stopOptions"
		      />
	</div>
	
</div>
</template>

<script setup lang="ts">
import { ref,defineProps, watch } from 'vue';

	let startDate=ref<Date|null>(null)
	let endDate=ref<Date|null>(null)
	let endDateDisabled=ref<boolean>(true)
	let emits=defineEmits(['startChange','endChange'])
	// 禁用今天之前的日期
	let startDateEnabled=(time:Date)=>{
		if (props.disableToday)
		{
			return time.getTime()<Date.now()-1*1000*60*60*24
		}
	}
	// 禁用结束日期的函数
	let endDateEnabled=(time:Date)=>{
		if(startDate.value){
			return time.getTime()<startDate.value.getTime()+1*1000*60*60*24
		}
	}
	let props=defineProps({
		startPlaceHolder:{
			type:String,
			default:'请选择开始日期'
		},
		endPlaceHolder:{
			type:String,
			default:'请选择结束日期'
		},
		// 是否禁用选择今天之前的日期
		disableToday:{
			type:Boolean,
			default:true
		}
		
		
	})
	// 监听开始日期
	watch(()=>startDate.value,val=>{
		if(!val){
			endDateDisabled.value=true;
			endDate.value=null;
		}else{
			emits('startChange',val)
			endDateDisabled.value=false;
		}
	})
	 // 监听结束日期
	 watch(()=>endDate.value,val=>{
	 	if(!val){
	 		endDateDisabled.value=true;
	 	}else{
	 		emits('endChange',{
				startDate:startDate.value,
				endDate:val
			})
	 		endDateDisabled.value=false;
	 	}
	 })
</script>

<style>
</style>